<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        /* 在css里写一个样式改变的类 */
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class='first'>文本</div>
    <script>
        /* 我们可以通过JS修改元素的大小、颜色、位置等样式
                                                                                        （1）element.style  行内样式擦操作
                                                                                        （2）element.className  类名样式操作
                                                                                    */

        // 1. 使用element.style 获得修改元素样式：如果样式比较少 或者让功能比较简单地情况下使用 
        var text = document.querySelector('div');
        text.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 像上面这样一个个的写比较麻烦 实现比较多的功能的时候不建议使用

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或功能复杂的情况
            this.className = 'change'; // class 是保留字 因此使用className
            // 当前元素的类名改为 change 相当于 <div class='change'>
            //注意：（1） className 会直接更改元素的类名，会覆盖原先的类名’first‘
            //     （2）如果想要保留原先的类名，我们可以这样做：
            this.className = 'first change'; // 原先的类名和改变后的类名中间用 空格 隔开，此时相当于一个多类名的选择器
        }
    </script>

</body>

</html>